<template>
	<view class="container">
		<!-- 顶部商品信息 -->
		<view class="goods" v-for="item in items">
			<view class="goods-image">
				<image :src="item.product.post_url"></image>
			</view>
			<view class="goods-name"><text>{{ item.product.title}}</text></view>
		</view>
		<view class="comment">
			<view class="item star">
				<view class="label">评分</view>
				<view>
					<u-rate :count="5" v-model="star" inactive-color="#DCDEE0" active-color="#FBA808" :disabled="true"
						size="40"></u-rate>
				</view>
			</view>
			<view class="item image">
				<view class="label">图片</view>
				<view>
          <u-upload :action="action" max-count="6" width="160" height="160" :file-list="fileList" @on-success="successFile" @on-remove="removeFile"></u-upload>
				</view>
			</view>
			<view class="item content">
				<view class="label">评价</view>
				<view class="content-txt">
					<textarea cols="30" rows="10" maxlength="255" v-model="content"></textarea>
				</view>
			</view>
		</view>
		<view class="btn">
			<button @click="submit">提交评价</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        order: {},
        items: [],
				star: 5,
				// 演示地址，请勿直接使用
				action: '',
				fileList: [],
        fileList2: [],
				content: ""
			}
		},
    onLoad({ orderId }) {
      this.action = this.$api.uploadImage
      if (!this.$store.state.userInfo.id || !orderId) {
        // 退出到首页
        uni.reLaunch({
          url: '/pages/index/index'
        })
      }
      this.$api.getOrderDetail(orderId).then(res => {
        this.order = res
        if (this.order.items && this.order.items.length) {
          this.items = this.order.items.map(item => {
            let cartItem = {}
            if (item.product_detail) {
              cartItem = JSON.parse(item.product_detail)
            }
            return {
              ...cartItem,
            }
          }).filter(item => item.id)
        }
      })
    },
    methods: {
      successFile(e) {
        this.fileList2.push(e.data.url)
      },
      removeFile(index) {
        console.log(index)
        this.fileList2.splice(index, 1)
      },
      submit() {
        if (!this.content) {
          uni.showToast({
            title: '请输入评价内容',
            icon: 'none'
          })
          return
        }
        uni.showToast({
          title: '提交中',
        })
        this.$api.addComment({
          order_id: this.order.id,
          content: this.content,
          image_urls: this.fileList2.join(','),
          product_ids: this.items.map(item => item.product_id),
          star: this.star,
          user_id: this.$store.state.userInfo.id,
          status: 0
        }).then(res => {
          uni.showToast({
            title: '评价成功',
            icon: 'success'
          })
          setTimeout(() => {
            uni.navigateBack()
          }, 1000)
        })
      }
    }
	}
</script>

<style>
	page {
		background: #F8F9FA;
	}
</style>

<style lang="scss" scoped>
	.goods {
		display: flex;
		align-items: center;
		background: #FFFFFF;
		padding: 10rpx 30rpx;

		.goods-image {
			image {
				width: 100rpx;
				height: 100rpx;
			}
		}

		.goods-name {
			margin-left: 10rpx;

			text {
				font-size: 26rpx;
				font-weight: 600;
				color: #333333;
			}
		}
	}

	.comment {
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 30rpx;
		padding: 40rpx 30rpx;

		.item {
			margin-bottom: 50rpx;
		}

		.label {
			font-size: 28rpx;
			color: #333333;
			margin-bottom: 20rpx;
		}

		.content-txt {
			border-radius: 20rpx;
			background: #F6F7F8;
			padding: 30rpx;

			textarea {
				font-size: 28rpx;
			}
		}
	}

	.btn {
		display: flex;
		align-items: center;
		margin: 30rpx;

		button {
			flex: 1;
			border-radius: 46rpx;
			background: #40AE36;
			color: #FFFFFF;
			font-size: 30rpx;
			line-height: 90rpx;
		}
	}
</style>
